import Vue from 'vue'
import Vuex from "vuex";
import _ from 'lodash';

Vue.use(Vuex)
//TODO 变为模块加载方式
const state = {
    bar: {
        legend: {
            type: 'plain',
            show: true,
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            textStyle: {
                color: '#000'
            }
        },
        xAxis: {
            show: true,
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                    type: 'solid',
                }
            },
            axisLabel: {
                fontSize: 12
            }
        },
        yAxis: {
            show: true,
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                    type: 'solid',
                }
            }
        },
        color: [],
        dataset: {
            source: []
        },
        series:
            {
                bar:
                    {
                        showBackground: false,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)',
                            borderColor: '#000',
                            borderType: 'solid',
                            borderRadius: 0
                        },
                        label: {
                            show: false,
                            rotate: 0,
                            color: '#fff',
                            fontSize: 12,
                            position: 'inside'
                        },
                        itemStyle: {
                            color: '#5470c6',
                            borderColor: '#000',
                            borderWidth: 0,
                            borderRadius: 0,
                        },
                        barWidth: 'auto',
                        barGap: '100%'
                    }
            }
    },
    multiBar: {
        legend: {
            type: 'plain',
            show: true,
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            textStyle: {
                color: '#000'
            }
        },
        xAxis: {
            show: true,
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                    type: 'solid',
                }
            },
            axisLabel: {
                fontSize: 12
            }
        },
        yAxis: {
            show: true,
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                    type: 'solid',
                }
            }
        },
        color: ['red', 'yellow'],
        dataset: {
            source: []
        },
        series:
            {
                bar:
                    {
                        showBackground: false,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)',
                            borderColor: '#000',
                            borderType: 'solid',
                            borderRadius: 0
                        },
                        label: {
                            show: false,
                            rotate: 0,
                            color: '#fff',
                            fontSize: 12,
                            position: 'inside'
                        },
                        itemStyle: {
                            color: '#5470c6',
                            borderColor: '#000',
                            borderWidth: 0,
                            borderRadius: 0,
                        },
                        barWidth: 'auto',
                        barGap: '100%'
                    }
            }
    },
    line: {
        legend: {
            type: 'plain',
            show: true,
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            textStyle: {
                color: '#000'
            }
        },
        xAxis: {
            show: true,
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                    type: 'solid',
                }
            },
            axisLabel: {
                fontSize: 12
            }
        },
        yAxis: {
            show: true,
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#333',
                    type: 'solid',
                }
            }
        },
        color: [],
        dataset: {
            source: []
        },
        series:
            {
                type: 'line',
                showBackground: false,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)',
                    borderColor: '#000',
                    borderType: 'solid',
                    borderRadius: 0
                },
                label: {
                    show: false,
                    rotate: 0,
                    color: '#fff',
                    fontSize: 12,
                    position: 'inside'
                },
                itemStyle: {
                    color: '#5470c6',
                    borderColor: '#000',
                },
            }
    }
};

const getters = {
    legend: (state) => {
        return state.legend
    },
    getOption: (state) => {
        return (path) => {
            return _.get(state, path)
        }
    }
};

const mutations = {
    setOption: (state, {path, option}) => {
        _.set(state, path, option);
    },
    setLegendType: (state, type) => {
        state.legend.type = type
    },
    setLegendShow: (state, show) => {
        state.legend.show = show
    },
    setLegendLeft: (state, left) => {
        state.legend.left = left
    },
    setLegendRight: (state, right) => {
        state.legend.righ = right
    },
    setLegendTop: (state, top) => {
        state.legend.top = top
    },
    setLegendBottom: (state, bottom) => {
        state.legend.bottom = bottom
    }
};
const actions = {
    //合并图表的配置和vuex里存的配置
    mergeOptions({state}, options) {
        for (let key in state) {
            if (Object.prototype.hasOwnProperty.call(options, key)) {
                if (key == 'series' && options[key].length > 1) {
                    state['series'][options['series'][0]['type']]['itemStyle']['color'] = undefined;
                    _.merge(state['series'][options['series'][0]['type']], options['series'][0])
                } else {
                    _.merge(state[key], options[key])
                }
            }
            console.log({options, state})
        }
    }
};

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
export default store